<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/online.css">
    <link rel="stylesheet" href="../dist/css/zui.min.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="javascript:;">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容">
                <img src="../img/public/search.png" alt="">
            </div>
            <div class="login">
                <a href="javascript:;">登陆</a>
                /
                <a href="javascript:;">注册</a>
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li>课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li>个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <div class="row">
            <div class="left">热门城市</div>
            <div class="right">
                <ul id="area">
                    <!-- <li><a>不限</a></li> -->
                    <!-- <li><a>北京</a></li>
                    <li><a>上海</a></li>
                    <li><a>江苏</a></li>
                    <li><a>济南</a></li>
                    <li><a>河南</a></li>
                    <li><a>天津</a></li>
                    <li><a>沈阳</a></li>
                    <li><a>石家庄</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按年级选择</div>
            <div class="right">
                <ul id="grade">
                    <!-- <li><a>不限</a></li> -->
                    <!-- <li><a>一年级</a></li>
                    <li><a>二年级</a></li>
                    <li><a>三年级</a></li>
                    <li><a>四年级</a></li>
                    <li><a>五年级</a></li>
                    <li><a>六年级</a></li>
                    <li><a>初一</a></li>
                    <li><a>初二</a></li>
                    <li><a>初三</a></li>
                    <li><a>高一</a></li>
                    <li><a>高二</a></li>
                    <li><a>高三</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按学科选择</div>
            <div class="right">
                <ul id="subject">
                    <!-- <li><a>不限</a></li> -->
                    <!-- <li><a>语文</a></li>
                    <li><a>数学</a></li>
                    <li><a>英语</a></li>
                    <li><a>生物</a></li>
                    <li><a>历史</a></li>
                    <li><a>政治</a></li>
                    <li><a>物理</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按类别选择</div>
            <div class="right">
                <ul id="category">
                    <!-- <li><a>不限</a></li> -->
                    <!-- <li><a class="active">期中</a></li>
                    <li><a>期末</a></li>
                    <li><a>小升初</a></li> -->
                </ul>
            </div>
        </div>
        <div class="lesson">
            <ul id="lesson">
                <!-- <li>
                    <div class="top">
                        <img src="../img/online/banner1-1.png" alt="" class="m">
                        <p>学科：英语</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>人教版语文第一节课程内容讲解</span>
                            <span class="time">地区：北京</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> -->
            </ul>
        </div>

        <div>
            <!-- <button>上一页</button>
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <button class="active">下一页</button> -->
            <ul id="myPager" class="pager" data-ride="pager" data-page="1" data-rec-per-page="10" data-rec-total="32"></ul>
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

   

    <!-- <script src="../js/ujiuye.js"></script> -->
</body>

</html>
<script src="../js/common.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../dist/js/zui.min.js"></script>
<script>
    // $('#myPager').on('onPageChange', function(e, state, oldState) {
    //     if (state.page !== oldState.page) {
    //         console.log('页码从', oldState.page, '变更为', state.page);
    //     }
    //     $.ajax({
    //         type: "get",
    //         url: "/apiv1/list/courses?type=1&page="+ state.page +"&pagesize=9",
    //         data: null,
    //         dataType: "json",
    //         success: function (response) {
    //             let str = '';
    //             for(let item of response.data.result){
    //                 str += `<li>
    //                     <a href="videoDetail.html?cid=${item.cid}">
    //                     <div class="top">
    //                         <img src="/${item.image_src}" alt="" class="m">
    //                         <p>学科：${item.subject_name}</p>
    //                     </div>
    //                     <div class="bottom">
    //                         <div class="left">
    //                             <span>${item.type_name + item.title}</span>
    //                             <span class="time">地区：${item.area_name}</span>
    //                         </div>
    //                         <div class="right">免费学习</div>
    //                     </div>
    //                     </a>
    //                 </li>`
    //             }
    //             $('#lesson').html(str);
    //             // 获取分页器实例对象
    //             var myPager = $('#myPager').data('zui.pager');
    //             // console.log( myPager );
    //             // 设置当前页码为 4，并同时设置记录总数为 100， 每页记录数目为 30
    //             myPager.set({
    //                 page: response.data.page,
    //                 recTotal: response.data.totalNum,
    //                 recPerPage: response.data.pagesize
    //             })
    //         }
    //     });
    // }); 
    let type = getSearchArg('type');
    
    window.onload = async function(){
        //渲染地区列表
        let areaData = await sendAjax({url:'/apiv1/list/areas'});
        let areaStr = `<li><a data-name="" onclick="searchByClick(this)">不限</a></li>`;
        for(let item of areaData.data){
            areaStr += `<li><a data-name="${item.area_name}" onclick="searchByClick(this)">${item.area_name}</a></li>`
        }
        $('#area').html(areaStr);
        //渲染年级列表
        let gradeData = await sendAjax({url:'/apiv1/list/grade'});
        let gradeStr = `<li><a data-name="" onclick="searchByClick(this)">不限</a></li>`;
        for(let item of gradeData.data){
            gradeStr += `<li><a data-name="${item.grade_name}" onclick="searchByClick(this)">${item.grade_name}</a></li>`
        }
        $('#grade').html(gradeStr);
        //渲染学科列表
        let subjectData = await sendAjax({url:'/apiv1/list/subject'});
        // console.log(subjectData.data);
        let subjectStr = `<li><a data-name="" onclick="searchByClick(this)">不限</a></li>`;
        for(let item of subjectData.data){
            subjectStr += `<li><a data-name="${item.subject_name}" onclick="searchByClick(this)">${item.subject_name}</a></li>`
        }
        $('#subject').html(subjectStr);
        //渲染类别列表
        let categoryData = await sendAjax({url:'/apiv1/list/category'});
        let categoryStr = `<li><a data-name="" onclick="searchByClick(this)">不限</a></li>`;
        for(let item of categoryData.data){
            categoryStr += `<li><a data-name="${item.category_name}" onclick="searchByClick(this)">${item.category_name}</a></li>`
        }
        $('#category').html(categoryStr);  

        //调用getCourseList()渲染页面
        getCourseList({type:1});
    }
    //1、给点击的<a>增加一个active样式，同时把其他兄弟元素的active样式去掉
    //2、收集用户点击的<a>中的data-name属性，为了下一步调用接口时使用
    function searchByClick(obj){
        $(obj).addClass('active').parent().siblings().children('a').removeClass('active');
        // let area = $('#area>li>a[class=active]').attr('data-name');
        let data = {
            area:$('#area>li>a[class=active]').attr('data-name')||'',
            grade:$('#grade>li>a[class=active]').attr('data-name')||'',
            subject:$('#subject>li>a[class=active]').attr('data-name')||'',
            category:$('#category>li>a[class=active]').attr('data-name')||''
        }
        console.log(data);
        //调用统一的封装函数，渲染页面
        getCourseList(data);
    }
    // 参数说明
    // type：1同步2精品
    // page：分页页码
    // pagesize：每页显示记录数
    // area：地区
    // grade：年级
    // subject：学科
    // category：：分类
    async function getCourseList({type=1,page=1,pagesize=10,area='',grade='',subject='',category=''}){
        let data = {type,page,pagesize,area,grade,subject,category};
        let result =await sendAjax({url:'/apiv1/list/courses',data});
        console.log(result);
        let str='';
        for(let item of result.data.result){
            str +=`<li>
                        <a href="videoDetail.html?cid=${item.cid}">
                        <div class="top">
                            <img src="/${item.image_src}" alt="" class="m">
                            <p>学科：${item.subject_name}</p>
                        </div>
                        <div class="bottom">
                            <div class="left">
                                <span>${item.type_name + item.title}</span>
                                <span class="time">地区：${item.area_name}</span>
                            </div>
                            <div class="right">免费学习</div>
                        </div>
                        </a>
                    </li>`
        }
        $('#lesson').html(str);
        //页面渲染后，利用ajax返回的相关数据初始化分页组件
        // 获取分页器实例对象
        var myPager = $('#myPager').data('zui.pager');
        // console.log( myPager );
        // 设置当前页码为 4，并同时设置记录总数为 100， 每页记录数目为 30
        myPager.set({
            page: result.data.page,
            recTotal: result.data.totalNum,
            recPerPage: result.data.pagesize
        });
        //监听页码的变更
        $('#myPager').on('onPageChange', function(e, state, oldState) {
            if (state.page !== oldState.page) {
                //state.page为变更后的页码
                data.page = state.page;
                getCourseList(data);
            }
        })
    }
</script>